<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!-- 引入Element UI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
      <template>
          <el-select v-model="value" placeholder="请选择">
              <!-- label是选项中显示的类容 value是选中之后的值 -->
              <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
          </el-select>
      </template>
      <h1>{{value}}</h1>
      <h1>请选择你想要的商品</h1>
      <el-select v-model="price" placeholder="请选择">
          <el-option v-for="product in arr" :label="product.title" :value="product.price"></el-option>
      </el-select>
      <h2>选中的商品价格:{{price}}</h2>
  </div>
  <!-- 引入Vue的js文件 -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- 引入Element UI的js文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el : "#app",
      data : function() {
        return {
            options : [{value : "选项1",label : "黄金糕"},
                {value: "选项2",label: "双皮奶"},
                {value: "选项3",label: "蚵仔煎"},
                {value: "选项4",label: "龙须面"},
                {value: "选项5",label: "白玉汤" }],
            value : '',
            arr: [{title: "李宁球鞋", price: 500},
                {title: "华为手机", price: 6000},
                {title: "小米电视", price: 4999}],
            price: ''
        }
      },
      methods : {

      }
    })
  </script>
</body>
</html>